<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05- v-for-CRUD案例</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>

</head>
<!--1. 准备一个容器-->
<div id="app">
    <p>
        <input type="number" placeholder="编号" style="width: 50px" v-model="newUser.id">
        <input type="text" placeholder="姓名" style="width: 100px" v-model="newUser.name">
        <input type="text" placeholder="地址" style="width: 150px" v-model="newUser.address">
        <select v-model="newUser.sex">
            <option>男</option>
            <option>女</option>
        </select>
        <button @click="addData" >添加</button>
        <input type="text" placeholder="姓名" v-model="sname">
        <button @click="selectData">搜索</button>
    </p>
    <hr>
    <p>
    <table border="1" cellspacing="0" width="100%" cellpadding="0">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>地址</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr align="center"  v-for="(item,index) in userList">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.address}}</td>
            <td>{{item.sex}}</td>
            <td>
                <button @click="upData(index)">修改</button>
                <button @click="deleteData(index)">删除</button>
            </td>
        </tr>
    </table>
    </p>
    <p>
        <input type="number"  placeholder="编号" style="width: 50px" v-model="uid">
        <input type="text" placeholder="姓名" style="width: 100px" v-model="uname">
        <input type="text" placeholder="地址" style="width: 150px" v-model="uaddress">
        <select v-model="usex">
            <option>男</option>
            <option>女</option>
        </select>
        <button @click="upDateNum()">修改</button>
    </p>
</div>
<script>
    // 创建集合存放数据
    let vm = new Vue({
        el:"#app",
        data:{
            userList:[
                {id:"1",name:"小明",address:"武汉",sex:"男"},
                {id:"2",name:"小红",address:"东莞",sex:"女"},
                {id:"3",name:"小芳",address:"佛山",sex:"女"},
                {id:"4",name:"小丽",address:"深圳",sex:"女"},
            ],
            newUser:[
                {id:"",name:"",address:"",sex:""}
            ],
            sname:"",

            uid:"",
            uname:"",
            uaddress:"",
            usex:"",
        },
        methods:{
            addData:function () {
                this.userList.push({id:this.newUser.id , name:this.newUser.name , address:this.newUser.address , sex:this.newUser.sex });
                console.log(this.userList);
            },
            selectData:function () {
              this.userList =  this.userList.filter(item => {
                   return item.name.indexOf(this.sname) !== -1;
               })
            },
            upData:function (index) {
                this.userList.splice(index,1,{id:this.userList[index].id, name:"蔡徐坤",address:"北京",sex:"男"});
            },
            deleteData:function (index) {
                this.userList.splice(index,1);
            },
            upDateNum:function () {
               /* for (let i = 0; i < this.userList.length; i++) {
                    let userListElement = this.userList[i];
                    if(userListElement.id === this.uid){
                        this.userList[i].name = this.uname;
                        this.userList[i].address = this.uaddress;
                        this.userList[i].sex = this.usex;
                    }
                }*/
                this.userList.map(item => {
                    if(item.id == this.uid){
                        item.name = this.uname;
                        item.address = this.uaddress;
                        item.sex = this.usex;
                    }
                })
            }

        }
    })
</script>
</body>
</html>